<div class="card">
    <div class="card-header"><i class="fa fa-list text-danger"></i> Rule List</div>
    <div class="card-body p-0 position-relative">
        <div class="bg-light px-2 py-2">
            <div class="btn-group btn-group-sm" role="group">
                <button class="btn btn-primary" (click)="refresh()">
                    <span><i class="fa fa-refresh mr-1"></i>Refresh</span> 
                </button>
                <button type="button" class="btn btn-info"  routerLink="../add-rules">
                    <span><i class="fa fa-plus mr-1"></i>Add</span>
                </button>
                <button type="button" class="btn btn-success" (click)="edit()" [disabled]="selectedRule.length !== 1">
                    <span><i class="fa fa-edit mr-1"></i>Edit</span>
                </button>
                <button type="button" class="btn btn-danger" (click)="deleteConfirm()" [disabled]="selectedRule.length === 0">
                    <span><i class="fa fa-trash mr-1"></i>Delete</span>
                </button>
              </div>
              <div class="btn-group btn-group-sm" role="group" style="margin-left: 1%;">
                <button type="button" class="btn btn-success" (click)="start()" [disabled]="selectedRule.length !== 1">
                    <span><i class="fa fa-play-circle-o mr-1"></i>Start</span>
                </button>
                <button type="button" class="btn btn-success" (click)="stop()" [disabled]="selectedRule.length !== 1">
                    <span><i class="fa fa-pause-circle-o mr-1"></i>Stop</span>
                </button>
                <button type="button" class="btn btn-success" (click)="restart()" [disabled]="selectedRule.length !== 1">
                    <span><i class="fa fa-history mr-1"></i>Restart</span>
                </button>
              </div>
        </div>
        <div class="table-responsive ">
            <table class="table table-hover text-truncate ">
                <thead class="thead-light">
                    <tr>
                      <th scope="col"><input type="checkbox" role="button" [checked]="isCheckedAll" (click)="selectAll($event)"></th>
                      <th scope="col">Id</th>
                      <th scope="col">Status</th>
                      <th scope="col">Rule Details</th>
                      <th scope="col">Status Details</th>
                      <th scope="col">Topology Structure</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let rule of rulesList" [class.table-active]="isChecked(rule.id)">
                        <td> <input type="checkbox" role="button"  [checked]="isChecked(rule.id)" (click)="selectOne($event,rule.id)"></td>
                        <td class="user-select-all">{{rule.id}}</td>
                        <td>{{rule.status}}</td>
                        <td>
                            <button class="btn btn-primary" (click)="ruleDetail(rule.id)">
                                <span><i class="fa fa-book mr-1"></i>Detail</span> 
                            </button>
                        </td>
                        <td>
                            <button class="btn btn-primary" (click)="statusDetail(rule.id)">
                                <span><i class="fa fa-book mr-1"></i>Detail</span> 
                            </button>
                        </td>
                        <td>
                            <button class="btn btn-primary" (click)="topologyStructure(rule.id)">
                                <span><i class="fa fa-book mr-1"></i>Detail</span> 
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- <div class="card-footer text-muted p-1">
        <nav aria-label="navigation">
            <ul class="pagination justify-content-end m-0">
                <li class="page-item disabled">
                    <a class="page-link" href="javascript:void(0)">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
                <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0)">Next</a>
                </li>
            </ul>
        </nav>
    </div> -->
</div>

<div class="modal fade" id="deleteConfirmDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="deleteConfirmDialogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="deleteConfirmDialogLabel">
                    <i class="fa fa-warning"></i>
                    Warning
                </h5>  
            </div>
            <div class="modal-body">
                The data will be permanently erased!!! Are you sure to execute delete operation？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" (click)="delete()">Confirm</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="ruleDetailDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="ruleDetailDialogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-primary" id="ruleDetailDialogLabel">
                    {{ruleModelTitle}}
                </h5>
            </div>
            <div class="modal-body">
                <pre class="mt-2 bg-secondary p-2 text-light rounded">{{ruleTemp}}</pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>